<template>
  <!--电子书库header-->
  <div id="index_type">
  <mt-header fixed title="电子书库">
          <router-link to="/shangchuan" slot="right"> 
          <mt-button height="20"  >上传</mt-button>
          </router-link>
  </mt-header>
  
  <div fixed class="bg">
  <router-link to="/news" > 
     <img class="bg" src="../assets/image/sk.png"></div>
      </router-link>
    <!--分类导航-->
    <div  id="index_type" class="nav" >
       <mt-button  height="20" width="90" @click.native.prevent="active = 'wenxue'">小说类</mt-button>
       <mt-button height="20" width="90" @click.native.prevent="active = 'tab-container2'">文学类</mt-button>
       <mt-button height="20" width="90" @click.native.prevent="active = 'tab-container3'">科幻类</mt-button>
       <mt-button height="20" width="90" @click.native.prevent="active = 'tab-container4'">实用类</mt-button>
    </div>
    
<!--tab-container1小说类-->
    <div id="index_type" class="page-tab-container">
       <mt-tab-container class="page-tabbar-tab-container" v-model="active">
      <mt-tab-container-item id="wenxue">
       <div class="cell">
      <!--tab-container1小说类书籍1-->
          <div class="dz-i"> 
          <!--1小说类图片-->
           <router-link to="/zahuo" > 
          <img class="ig1" src="../assets/image/jieyou.png">
           </router-link>
          </div>
          <br><br/>
          <!--1小说类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="解忧杂货店" label="作者：东野圭吾"></mt-cell><br> 
         
          <!--1小说类爱心+热度-->
          <p class="jz">(捐赠者：suki)</p>
          <img class="ig" src="../assets/image/xin.png">
          <mt-cell class="dz-j" slot="left" title="热度：9999"></mt-cell>
         <!--1小说类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br><br>
          </div>
          </div><br><br><!--1end--> 

         <!--tab-container1小说类书籍2-->
          <div class="dz-i"> 
          <!--1小说类图片-->
          <img class="ig1" src="../assets/image/fengzheng.png">
          </div>
          <br><br/>
          <!--1小说类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="追风筝的人" label="作者：胡塞尼"></mt-cell><br> 
          <!--1小说类爱心+热度-->
          <p class="jz">(捐赠者：mimi)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：6789"></mt-cell>
          <!--1小说类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br>
          </div><!--1end--> 


          <!--tab-container1小说类书籍3-->
          <div class="dz-i"> 
          <!--1小说类图片-->
          <img class="ig1" src="../assets/image/bainian.png">
          </div>
          <br><br/>
          <!--1小说类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="百年孤独" label="作者：加西亚·马尔克斯"></mt-cell><br> 
          <!--1小说类爱心+热度-->
          <p class="jz">(捐赠者：baby)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：1238"></mt-cell>
          <!--1小说类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br>
          </div><!--1end--> 

          <!--tab-container1小说类书籍4-->
          <div class="dz-i"> 
          <!--1小说类图片-->
          <img class="ig1" src="../assets/image/rangwo.png">
          </div>
          <br><br/>
          <!--1小说类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="让我留在你身边" label="作者：张嘉佳"></mt-cell><br> 
          <!--1小说类爱心+热度-->
          <p class="jz">(捐赠者：lily)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：222"></mt-cell>
          <!--1小说类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br><br>
          <div><br></div>
          </div>
          </div>
          </div><!--1end-->   
        </mt-tab-container-item>
        
<!--tab-container2文学类-->

        <mt-tab-container-item id="tab-container2">
          <div class="cell">
           <!--tab-container1文学类书籍-->
          <div class="dz-i"> 
          <!--1文学类图片-->
          <img class="ig1" src="../assets/image/zhongguo.png">
          </div>
          <br><br/>
          <!--1文学类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="中国古代文化常识" label="作者：王力"></mt-cell><br> 
          <!--1文学类爱心+热度-->
          <p class="jz">(捐赠者：shan)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：9955"></mt-cell>
         <!--1文学类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br><!--1end--> 

         <!--tab-container1文学类书籍-->
          <div class="dz-i"> 
          <!--1文学类图片-->
          <img class="ig1" src="../assets/image/shenghuo.png">
          </div>
          <br><br/>
          <!--1文学类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="生活的艺术" label="作者：林语堂"></mt-cell><br> 
          <!--1文学类爱心+热度-->
          <p class="jz">(捐赠者：chu)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：8635"></mt-cell>
          <!--1文学类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br>
          </div><!--1end--> 

          <!--tab-container1文学类书籍-->
          <div class="dz-i"> 
          <!--1文学类图片-->
          <img class="ig1" src="../assets/image/gushen.png">
          </div>
          <br><br/>
          <!--1文学类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="古神话选释" label="作者：袁珂"></mt-cell><br> 
          <!--1文学类爱心+热度-->
          <p class="jz">(捐赠者：qiqi)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：7923"></mt-cell>
          <!--1文学类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br>
          </div><!--1end--> 

          <!--tab-container1文学类书籍-->
          <div class="dz-i"> 
          <!--1文学类图片-->
          <img class="ig1" src="../assets/image/guoxue.png">
          </div>
          <br><br/>
          <!--1文学类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="国学小史" label="作者：吕思勉"></mt-cell><br> 
          <!--1文学类爱心+热度-->
          <p class="jz">(捐赠者：ray)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：5563"></mt-cell>
          <!--1文学类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br><br>
          <div><br></div>
          </div>
          </div>
          </div><!--1end-->  
          </div>
        </mt-tab-container-item>

<!--tab-container3科幻类-->

        <mt-tab-container-item id="tab-container3">
          <div class="cell">
           <!--tab-container1科幻类书籍-->
          <div class="dz-i"> 
          <!--1科幻类图片-->
          <img class="ig1" src="../assets/image/chaoxing.png">
          </div>
          <br><br/>
          <!--1科幻类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="超新星纪元" label="作者：刘慈欣"></mt-cell><br> 
          <!--1科幻类爱心+热度-->
           <p class="jz">(捐赠者：Ben)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：9655"></mt-cell>
         <!--1科幻类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div><br>
          </div><br><br><!--1end--> 

         <!--tab-container3科幻类书籍-->
          <div class="dz-i"> 
          <!--3科幻类图片-->
          <img class="ig1" src="../assets/image/xiyu.png">
          </div>
          <br/>
          <!--3科幻类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="西域幻沙录" label="作者：燕垒生"></mt-cell><br> 
          <!--3科幻类爱心+热度-->
           <p class="jz">(捐赠者：viro)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：6456"></mt-cell>
          <!--3科幻类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br>
          </div><!--1end--> 

          <!--tab-container3科幻类书籍-->
          <div class="dz-i"> 
          <!--3科幻类图片-->
          <img class="ig1" src="../assets/image/huixiaoshi.png">
          </div>
          <br><br/>
          <!--3科幻类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="会消失的人" label="作者：纪尧姆·米索"></mt-cell><br> 
          <!--3科幻类爱心+热度-->
           <p class="jz">(捐赠者：layce)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：2234"></mt-cell>
          <!--3科幻类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br>
          </div><!--1end--> 

          <!--tab-container1科幻类书籍-->
          <div class="dz-i"> 
          <!--3科幻类图片-->
          <img class="ig1" src="../assets/image/shengcun.png">
          </div>
          <br><br/>
          <!--3科幻类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="生存实验" label="作者：刘慈欣"></mt-cell><br> 
          <!--3科幻类爱心+热度-->
           <p class="jz">(捐赠者：Dami)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：1231"></mt-cell>
          <!--3科幻类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br><br>
          <div><br></div>
          </div>
          </div>
          </div><!--3end-->  
          </div>
        </mt-tab-container-item>

<!--tab-container4实用类-->

        <mt-tab-container-item id="tab-container4">
          <div class="cell">
           <!--tab-container4实用类书籍-->
          <div class="dz-i"> 
          <!--4实用类图片-->
          <img class="ig1" src="../assets/image/siji.png">
          </div>
          <br><br/>
          <!--4实用类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="2017.6大学英语四级真题" label="作者：耿小辉外语研究组"></mt-cell><br> 
          <!--4实用类爱心+热度-->
           <p class="jz">(捐赠者：May)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：9331"></mt-cell>
         <!--4实用类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br><!--1end--> 

         <!--tab-container4实用类书籍-->
          <div class="dz-i"> 
          <!--v类图片-->
          <img class="ig1" src="../assets/image/falv.png">
          </div>
          <br><br/>
          <!--4实用类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="一本书读懂法律常识" label="作者：张红军"></mt-cell><br> 
          <!--4实用类爱心+热度-->
           <p class="jz">(捐赠者：Bill)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：6772"></mt-cell>
          <!--4实用类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br>
          </div><!--1end--> 

          <!--tab-container4实用类书籍-->
          <div class="dz-i"> 
          <!--4实用类图片-->
          <img class="ig1" src="../assets/image/xingge.png">
          </div>
          <br><br/>
          <!--4实用类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="性格心理学" label="作者：邹宏明"></mt-cell><br> 
          <!--4实用类爱心+热度-->
           <p class="jz">(捐赠者：Sisi)</p>
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：2811"></mt-cell>
          <!--4实用类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br></br>
          </div>
          </div><br><br>
          </div><!--1end--> 

          <!--tab-container4实用类书籍-->
          <div class="dz-i"> 
          <!--4实用类图片-->
          <img class="ig1" src="../assets/image/yunying.png">
          </div>
          <br><br/>
          <!--4实用类简介-->
          <div class="dz-z">
          <mt-cell slot="left" title="从零开始做运营" label="作者：黄有璨"></mt-cell><br> 
          <!--4实用类爱心+热度-->
          <div><img class="ig" src="../assets/image/xin.png"></div>
          <mt-cell class="dz-j" slot="left" title="热度：2341"></mt-cell>
          <!--4实用类下载按钮-->       
          <div class="page-toast">
          <div class="page-toast-wrapper">
          <mt-button @click.native="openBottomToast" size="small">下载</mt-button>
          <br><br>
          <div><br></div>
          </div>
          </div>
          </div><!--4end-->  
          </div>
        </mt-tab-container-item>

      </mt-tab-container>
    </div>
  </div>
  </div>
</template>

<script type="text/babel">

import { Tabbar, TabItem } from 'mint-ui'
import { Toast } from 'mint-ui'

export default {
  name: '书库',
  data() {
    return {
      active: 'wenxue'
    };
  },
  methods: {
      openBottomToast() {
        Toast({
          message: '下载成功',
          position: 'bottom'
        });
      }
    }

};
  


</script>

<style lang="css" scoped>
.bg{
  margin:0 auto;
  width: 100%;
  height: 100%;

}
  .item {
    display: inline-block;
  }

  .nav {
    margin:0 auto;
    padding:10px;
    margin: center;
    text-align:center;
    padding-left:20px;
    
  }

  .link {
    color: inherit;
    padding: 20px;
    display: block;
  }

  #index_type .cell {
   
  }
.ig1{
  width: 110px;
  height: 140px;
}
.ig{
  width: 30px;
  height: 30px;
  float:right;
}
.page-toast-wrapper{float:right;}

  .dz-z{
  margin-left:0px;
  width:100%;
  height: 180px;
  border-bottom:1px 
  solid #2E8B57;
  text-align:center;
  font-size: 30px;
  padding-right:150px;

}
.mint-button{
  height: 30px;
  background-color:#2E8B57;
  color: #FFFFFF;
}

.jz{
  text-align: center;
  font-size: 9px;
  color:#A9A9A9;
}

.dz-i
{
  
  
  float:left;
  margin: 20px;

}

.dz-j
{
  margin-top:-3px;
  text-align:center;
  font-color: #200;
  float:right;
  font-size:60px;
}
.dz-x
{
  width:50px;
  text-align:center;
  margin-bottom: left;
  padding-bottom: 25px;

  font-family: Courier;
  color: #ffffff;
  font-size: 2px;
  padding: 5px;
  text-decoration: none;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  background: #81b2e6;
  float: right;
} 
</style>
